
body {
background-color: #f4f4f4;
font-family: sans-serif;
margin-bottom: 30%;
}

#contents-contain {
position: fixed;
top: 0;
left: 50%;
width: 0;
height: 0;
}
#contents {
position: relative;
top: 200px;
left: 310px;
width: 20em;
}
a {
color: #666666;
text-decoration: none;
}
a:hover {
color: #777777;
text-decoration: underline;
}
#contents div div {
margin: .3em 0 .3em 1em;
}
#contents .title {
color: #444444;
font-size: .7em;
margin-top: 1.5em;
margin-left: .7em;
}
#contents a {
color: #444444;
}
#contents ul {
font-size: .8em;
margin-top: 2.5em;
padding-left: 1.5em;
}
#contents li {
margin-bottom: .5em;
}

#optionstitle {
text-align: center;
margin: 1em;
}
.note {
margin: 0 auto .5em;
width: 578px;
padding: .5em;
color: #444444;
background-color: #e8e8e8;
-webkit-border-radius: 5px;
border: 1px solid #d9d9d9;
}
.note.clear {
background-color: transparent;
border: 0;
}
.note.blue {
background-color: #e4e4ff;
border: 1px solid #d6d6f0;
}
.note.red {
background-color: #ffe3e5;
border: 1px solid #f0d4d7;
}
.note.yellow {
background-color: #f0f0d0;
border: 1px solid #e1e1c1;
}
.note.green {
background-color: #d7f0d7;
border: 1px solid #c8e1c8;
}
.note .close {
font-weight: bold;
float: right;
color: #664444;
background-color: #eeeeee;
background: -webkit-linear-gradient(top, #fdfdfd, #dddddd);
border: 1px solid #cccccc;
cursor: pointer;
-webkit-border-radius: 2px;
width: 1.4em;
line-height: 1.4em;
text-align: center;
}
.note .close:hover {
color: #aa0000;
border: 1px solid #aaaaaa;
}
.note a {
text-decoration: underline;
}
.note p {
margin: 0;
padding: .2em .5em;
}
.note p+p {
margin-top: .5em;
} 
#reminder {
margin: 0 auto;
width: 550px;
font-size: .8em;
color: #888888;
}
#addgesture {
position: relative;
margin: 1em auto 0;
width: 600px;
height: 1em;
}
#addgesturebutton {
position: absolute;
right: 1em;
font-size: 1em;
background-color: #eeeeee;
background: -webkit-linear-gradient(top, #fdfdfd, #dddddd);
border: 1px solid #cccccc;
cursor: pointer;
-webkit-border-radius: 2px;
padding: 0 .4em;
line-height: 1.4em;
}
#addgesturebutton:hover {
border: 1px solid #aaaaaa;
}
#addgesturebutton span {
font-weight: bold;
}
#addgesturebutton:hover span {
color: #006600;
}
#addactionbutton {
float: right;
font-weight: normal;
font-size: .77em;
background-color: #eeeeee;
background: -webkit-linear-gradient(top, #fdfdfd, #dddddd);
border: 1px solid #cccccc;
cursor: pointer;
-webkit-border-radius: 2px;
padding: 0 .4em;
line-height: 1.4em;
}
#addactionbutton:hover {
border: 1px solid #aaaaaa;
}
#addactionbutton span {
font-weight: bold;
}
#addactionbutton:hover span {
color: #006600;
}
#alloptions {
margin: 1em auto;
width: 600px;
}
.optiontable {
margin-bottom: 2em;
padding: 1em;
background-color: #ffffff;
-webkit-border-radius: 5px;
border: 1px solid #e9e9e9;
}
.optiontable > a[name] {
display: block;
}
.tabletitle {
font-weight: bold;
font-size: 1.3em;
padding-bottom: 1em;
margin-bottom: 1em;
border-bottom: 2px solid #eeeeee;
}
.actionrow + .tabletitle {
margin-top: 1em;
}
.actionrow {
margin-top: 1em;
padding-bottom: 1em;
border-bottom: 2px solid #eeeeee;
}
.actioncontext {
float: left;
height: 1em;
opacity: .5;
margin-right: .3em;
}
.actiontitle {
font-weight: bold;
margin-bottom: .2em;
}
.actiondescrip {
color: #444444;
}
.grouprows .actiontitle {
display: inline;
}
.grouprows .actiondescrip {
display: inline;
margin-left: 1em;
}
.editcustom {
font-weight: normal;
color: #002200;
background-color: #eeeeee;
background: -webkit-linear-gradient(top, #fdfdfd, #dddddd);
border: 1px solid #cccccc;
cursor: pointer;
margin: 0 0 0 1em;
-webkit-border-radius: 2px;
padding: 0 .4em;
line-height: 1.4em;
}
.editcustom:hover {
border: 1px solid #aaaaaa;
}
.delcustom {
font-weight: bold;
color: #664444;
background-color: #eeeeee;
background: -webkit-linear-gradient(top, #fdfdfd, #dddddd);
border: 1px solid #cccccc;
cursor: pointer;
margin: 0 0 0 1em;
-webkit-border-radius: 2px;
padding: 0 .4em;
line-height: 1.4em;
}
.delcustom:hover {
border: 1px solid #aaaaaa;
}
.savecustom {
font-weight: bold;
float: right;
color: #002200;
background-color: #eeeeee;
background: -webkit-linear-gradient(top, #fdfdfd, #dddddd);
border: 1px solid #cccccc;
cursor: pointer;
margin: 0;
-webkit-border-radius: 2px;
padding: 0 .4em;
line-height: 1.4em;
}
.savecustom:hover {
border: 1px solid #aaaaaa;
}
.undocustom {
font-weight: normal;
float: right;
color: #002200;
background-color: #eeeeee;
background: -webkit-linear-gradient(top, #fdfdfd, #dddddd);
border: 1px solid #cccccc;
cursor: pointer;
margin: 0 1em 0 0;
-webkit-border-radius: 2px;
padding: 0 .4em;
line-height: 1.4em;
}
.undocustom:hover {
border: 1px solid #aaaaaa;
}
.sharecustom {
float: left;
margin: 0 2em 0 0;
font-size: .9em;
}
.envcustom {
float: left;
margin: 0 .5em 0 0;
}
.cxtcustom {
float: left;
margin: 0 .5em 0 0;
}
.titlecustom {
width: 50%;
padding: .3em;
margin: .5em 40% 0 0;
border: 1px solid #ccc;
}
.descripcustom {
width: 100%;
padding: .3em;
margin: .5em 0 0 0;
border: 1px solid #ccc;
}
.codecustom {
width: 100%;
height: 6em;
padding: .3em;
margin: .5em 0 0 0;
border: 1px solid #ccc;
}
.settingrow {
margin-top: 1em;
padding-bottom: 1em;
border-bottom: 2px solid #eeeeee;
}
.settingtitle {
font-weight: bold;
margin-bottom: .2em;
}
.settingdescrip {
color: #444444;
}
.settingcontrol {
float: right;
}
.settingcontrol input[type=button], .settingcontrol select {
min-width: 5em;
font-weight: bold;
text-align: center;
}
.filespoof {
position: relative;
overflow: hidden;
display: table;
}
.filespoof input[type=file] {
position: absolute;
opacity: 0;
min-width: 100%;
}
.filespoof input[type=file]:focus + * {
outline: 1px solid rgba(255,180,0,.7);
}
.rowgroup {
margin-top: 1em;
margin-bottom: .5em;
}
.actiongrouptitle, .settinggrouptitle {
font-weight: bold;
font-size: 1.1em;
}
.settinggrouptitle {
padding-bottom: .5em;
border-bottom: 2px solid #eeeeee;
}
.actiongrouptitle a, .settinggrouptitle a {
font-size: .8em;
color: #666666;
text-decoration: none;
float: right;
margin-right: 1em;
cursor: pointer;
padding:3px 6px;
border-radius: 6px;
}
.actiongrouptitle a:hover, .settinggrouptitle a:hover {
background-color: #e8e8e8;
}
.grouprows {
margin-left: 3em;
display: none;
}
.gestureset {
float: right;
}
.gesture > div:last-child {
margin-right: 1.5em;
}
.gesture + .gesture > :last-child {
border-top: 1px solid #dddddd;
}
.gesture-add {
font-weight: bold;
float: right;
color: #002200;
background-color: #eeeeee;
background: -webkit-linear-gradient(top, #fdfdfd, #dddddd);
border: 1px solid #cccccc;
cursor: pointer;
margin: 0 0 1em 1em;
-webkit-border-radius: 2px;
width: 1.4em;
line-height: 1.4em;
text-align: center;
}
.gesture-add:hover {
color: #006600;
border: 1px solid #aaaaaa;
}
.gesture-remove {
font-weight: bold;
float: right;
color: #664444;
background-color: #eeeeee;
background: -webkit-linear-gradient(top, #fdfdfd, #dddddd);
border: 1px solid #cccccc;
cursor: pointer;
-webkit-border-radius: 2px;
width: 1.4em;
line-height: 1.4em;
text-align: center;
}
.gesture-remove:hover {
color: #aa0000;
border: 1px solid #aaaaaa;
}
.gesture-remove + * {
border-radius: 3px;
}
.gesture-remove:hover + * {
background-color: #ffe8e8;
}
.clearall {
clear: both;
}
.drawingcanvas {
position: fixed;
padding: .5em;
top: 10%;
left: 10%;
width: 80%;
height: 80%;
background-color: #ffffff;
border: 2px solid #cccccc;
-webkit-border-radius: 20px;
}
#canvasclose {
font-size: 1.3em;
font-weight: bold;
float: right;
background-color: #eeeeee;
background: -webkit-linear-gradient(top, #fdfdfd, #dddddd);
border: 1px solid #cccccc;
margin: .5em;
cursor: pointer;
-webkit-border-radius: 2px;
width: 1.4em;
line-height: 1.4em;
text-align: center;
}
#canvasclose:hover {
border: 1px solid #aaaaaa;
}
.canvastitle {
font-weight: bold;
margin-bottom: .2em;
}
.canvasdescrip {
color: #444444;
}

#donate {
display: none;
width: 560px;
margin: 0 auto 20px;
background-color: #DDFFBC;
padding: 1em;
-webkit-border-radius: 15px;
}
#alertmessage {
width: 560px;
margin: 0 auto 20px;
background-color: #FFDDBC;
padding: 1em;
-webkit-border-radius: 15px;
}

.footer {
color: #666;
font-size: .8em;
text-align: center;
}



@media print {

body {
zoom: 70%;
}
* {
background-color: white !important;
background-image: none !important;
}
#contents-contain, #addgesture, .note, .gesture-remove, .gesture-add, .rowgroup, #addactionbutton, .editcustom, .delcustom, #cat_settings, .footer {
display: none;
}
.optiontable {
border-width: 0;
page-break-inside: avoid;
}
.tabletitle {
padding-top: 2em;
clear:both;
border-bottom: 0;
}
.actionrow {
width: 31%;
padding: 1em 1% .5em;
margin: 0;
float: left;
border-top: 2px solid #EEE;
border-bottom: 0;
}
.actionrow div {
overflow: visible !important;
}
.actionrow:nth-child(3n) {
clear:both;
}
#alloptions {
width: 100%;
}

}
